import React, { Component,Fragment } from 'react';
import './style.css';
import TodoItem from "./TodoItem";
import axios from 'axios';
import 'antd/dist/antd.css';
import { Input, Button, List   } from 'antd';

class Todolist extends Component{
    constructor(props){
        super(props);
        // this 绑定的指向放在构造函数里性能比较好
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleBtnClick = this.handleBtnClick.bind(this);
        this.handleItemDelete = this.handleItemDelete.bind(this);
        this.state = {
          inputValue: 'hello react',
          list:[]
        }
    }


    /**
     * Method one:
     * this.setState({
            inputValue: e.target.value
        })
     * @param e
     */
    handleInputChange(e){
        // 修改 state 数据的写法二：(异步的，性能好，需要先保存数据)
        const value = e.target.value;
        this.setState(() => {
            return {
                inputValue: value
            }
        })
    }

    /**
     * Method one:
     *  this.setState({
            list:[...this.state.list, this.state.inputValue],
            inputValue: ''
        })
     */
    handleBtnClick(){
        // 写法二
        /*修改sate前默认有一个prevState参数，存放以前的数据，相当于this.state ,
        但是这种写法更加靠谱，可以避免state状态被误该*/
        this.setState((prevState) =>({
            list:[...prevState.list, prevState.inputValue],
            inputValue: ''
        }))


    }

    /**
     * Method one:
     *
     * const list = [...this.state.list];
     list.splice(index,1);
     this.setState({
            list: list
        })
     * @param index
     */
    handleItemDelete(index){
        // 写法二 (标准)
        this.setState((prevState) => {
            const list = [...prevState.list];
            list.splice(index,1);
            return {list}
        })
    }

    /**
     * ajax request
     */
   /* componentDidMount() {
        axios.get('/api/todolist')
            .then((res) => {this.setState(() => ({
                list: [...res.data]
            })) })
            .catch(() => {alert('error')});
    }*/

    // 把逻辑提取出来，防止jsx代码过于复杂
  /*  getTodoItem() {
        // 注意：记得return
        return this.state.list.map((item,index) => {
            return (
                <div  key={index+item}>
                    {/!*这里父组件向子组件传递函数的时候一定要强制给这个组件绑定this，表示这个这个是父组件的函数；
                         子组件在获取这个函数的时候使用this.props去获取的，this.props的this是子组件的；
                         在父组件不强加绑定this的话子组件引用会报is not a function的错误*!/}
                    <TodoItem
                        content={item}
                        index={index}
                        deleteItem={this.handleItemDelete}
                    />
                </div>
            );
        })
    }*/

    listItems() {
        return this.state.list.map((item, index) => {
            console.log('aaaaa: ', item);
            return (
                <div  key={index+item} >
                    <List.Item >{item}</List.Item>
                </div>
            )
        })
    }

    render(){
        return (
         <Fragment>
             {/* 添加 htmlFor 之后用户点击文字，光标就会聚焦在输入框 */}
          {/*  <label htmlFor="inputArea">请输入内容</label>
            <input
              id='inputArea'
              className='input'
              value={this.state.inputValue}
              onChange={this.handleInputChange}
            />
            <button onClick={this.handleBtnClick}>submit</button>*/}

             <br/>
                 <div>
                     <Input
                         style={{width: 300, marginRight: 10, marginLeft: 10}}
                         placeholder={'please input info'}
                         value={this.state.inputValue}
                         onChange={this.handleInputChange}
                     />
                     <Button
                         type="primary"
                         onClick={this.handleBtnClick}
                     >Click</Button>
                     <ul>
                         {this.listItems()}
                     </ul>
                 </div>
        {/*    <ul>
              {this.getTodoItem()}
            </ul>*/}
         </Fragment>
        );
  }

}


export default Todolist;